<template>
	<view class="main">
		<view class="card" v-if="info!=''">
			<view class="card-tit">
				{{info.title}}
			</view>
			<view class="card-item flex align">
				<view>任务类型</view>
				<view>{{info.task_type_text}}</view>
			</view>
			<view class="card-item flex align" v-if="info.store_text">
				<view>门店</view>
				<view v-for="(item,index) in info.store_text" :key="index">{{item.name}}
					<text v-if="index!=info.store_text.length-1">/</text>
				</view>
			</view>
			<view class="card-item flex" v-if="info.task_type==2">
				<view>达人可探店日期</view>
				<view>{{info.other.visit_store.dates}}</view>
			</view>
			<view class="card-item flex" v-if="info.task_type==2">
				<view>每日接待探店人数</view>
				<view>{{info.other.visit_store.day_person_limit}}</view>
			</view>
			<view class="card-item flex align">
				<view>地域限制</view>
				<view>{{info.region_limit}}</view>
			</view>
			<view class="card-item flex align">
				<view>好评截图</view>
				<view>{{info.praise_screenshot_text}}</view>
			</view>
			<!-- <view class="card-item flex align" v-if="info.desc!=''">
				<view>要求</view>
				<view>{{info.desc}}</view>
			</view> -->
			<!-- <view class="card-item flex align">
				<view>费用</view>
				<view>￥{{info.cost_amount}}</view>
			</view> -->
			<view class="card-item flex align">
				<view>招募</view>
				<view>{{info.num}}人</view>
			</view>
			<view class="card-item flex align">
				<view>截止</view>
				<view>{{info.deadline_time}}</view>
			</view>
			<view class="card-item flex align">
				<view>粉丝数量</view>
				<view>{{info.fans}}</view>
			</view>
			<view class="card-item">
				<view style="margin-bottom: 10rpx;">报名条件：</view>
				<view style="margin-bottom: 10rpx;">等级：{{info.level_text}}</view>
				<view style="margin-bottom: 10rpx;">粉丝数量：{{info.fans}}</view>
				<view style="margin-bottom: 10rpx;">达人身份：{{info.app_text}}</view>
			</view>
		</view>
		<view class="card" v-if="info!=''">
			<view class="card-tit">合作费用<text>*</text></view>
			<view v-if="info.task_type==2">
				<view v-if="typeMine==2&&status==1">
					<u-cell title="报价" :value="'￥'+InfoPrice" v-if="InfoPrice!=''&&InfoPrice!=null"></u-cell>
				</view>
				<view v-else>
					<u-cell title="自报价" :value="'￥'+InfoPrice" v-if="InfoPrice!=''&&InfoPrice!=null"></u-cell>
				</view>
			</view>
			<u-cell title="合作费用" :value="cost_model_text"></u-cell>
			<view v-if="info.cost_model==1">
				<u-cell title="费用类型" :value="info.cost_type_text"></u-cell>
				<view v-if="info.is_user_price==1">
					<u-cell title="费用金额" value="已开启自报价"></u-cell>
				</view>
				<view v-else>
					<u-cell title="费用金额" :border="false"></u-cell>
					<view class="flex between costAmount" v-for="(item,index) in info.level_cost_amount">
						<view>{{item.level}}</view>
						<view>￥{{item.cost_amount}}</view>
					</view>
				</view>

			</view>
		</view>
		<view class="card flex align between" v-if="type==2">
			<image src="../../static/images/task/a1.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/b2.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/b3.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/b4.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/b5.png" class="step"></image>
		</view>
		<view class="card flex align between" v-if="type==1">
			<image src="../../static/images/task/a1.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/a2.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/a3.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/a4.png" class="step"></image>
			<image src="../../static/images/task/to.png" class="to"></image>
			<image src="../../static/images/task/a5.png" class="step"></image>
		</view>
		<view class="card">
			<view class="card-tit">任务要求<text>*</text></view>
			<view class="content">
				<view v-for="(item,index) in info.store_text" :key="index">
					<view><text>【商家名称】：</text>{{item.name}}</view>
					<view><text>【门店地址】：</text>{{item.address}}</view>
				</view>
				<view><text>【发布要求】：</text></view>
				<rich-text :nodes="info.desc"></rich-text>
				<!-- 	<view>1、xxxxx</view>
				<view>2、xxxxx</view>
				<view>【主推套餐】</view>
				<view>1、xxxxx</view>
				<view>2、xxxxx</view>
				<view>【商家爆点】</view>
				<view>1、xxxxx</view>
				<view>2、xxxxx</view> -->
			</view>
		</view>
		<view class="card" v-if="info.task_type==1">
			<view class="card-tit">POI截图<text>*</text></view>
			<image :src="info.other.poi.picture" style="width: 300rpx;height: 300rpx;"
				@click="toPre(info.other.poi.picture)"></image>
		</view>
		<view class="card" v-if="type==2">
			<view class="card-tit">素材下载<text>*</text></view>
			<view class="file-list">
				<view class="item flex align between" v-for="(item,index) in info.material_group_text">
					<view>{{item.name}}</view>
					<view @click="toLook(item.id)">查看下载</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="btom-btn flex align between">
			<view>招募{{info.num}}人 /剩余{{info.remain_num}}人</view>
			
				<view @click="toTask(info.id,info.praise_screenshot)" v-if="typeMine==1&&info.taskApply&&info.taskApply.status==1&&info.taskSubmit==''">提交任务</view>
				<view @click="toUrl2(info.id)" v-if="typeMine==1&&info.taskApply&&info.taskApply.status==1&&info.taskSubmit.check_status==1">提交列表</view>
				<view @click="toTask(info.id,info.praise_screenshot)" v-if="typeMine==1&&info.taskApply&&info.taskApply.status==1&&info.taskSubmit.check_status==3">提交任务</view>
				<view v-if="typeMine==1&&info.taskApply.status==0">已报名/待选号</view>
				<view @click="toApply" v-if="typeMine==1&&info.taskApply==null">任务报名</view>
		
			<view @click="toSubmit" v-if="typeMine==2&&status==1&&last_submit==''">提交任务</view>
			<view @click="toSubmit"
				v-if="typeMine==2&&status==1&&last_submit.check_status&&last_submit.check_status==3">提交任务</view>
			<view @click="toUrl()" v-if="typeMine==2&&status==1&&last_submit.check_status&&last_submit.check_status==1">
				提交列表</view>
			<view style="background: green;"
				v-if="typeMine==2&&status==1&&last_submit.check_status&&last_submit.check_status==2">任务已完成</view>
			<view v-if="typeMine==2&&status==2" style="background: grey;">未选中</view>
			<!-- <view v-if="typeMine==2&&status==3">未选中</view> -->
		</view>
		<view class="showPrice" v-if="showPrice">
			<view class="showContent">
				<view class="tit">自报价</view>
				<view class="flex align" style="border-bottom: solid 1rpx gainsboro;">
					<text>￥</text>
					<input style="width: 80%;" placeholder="请输入价格" v-model="price" type="number" />
				</view>
				<view class="btns flex align between">
					<view @click="showPrice = false">取消</view>
					<view @click="toComfirm">确定</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		taskDetail,
		taskApplyAdd,
		taskApplyDetail,
		dictAll,
		checkToken,
		minilogin
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				id: '',
				info: '',
				type: '',
				typeMine: 1,
				status: '',
				last_submit: '',
				task_id: '',
				cost_model_text: '',
				showPrice: false,
				price: '',
				InfoPrice: ''
			};
		},
		onLoad(option) {
			this.id = option.id
			this.type = option.type
			if (option.typeMine) {
				this.typeMine = option.typeMine
			}
		},
		onShow() {
			let that = this;
			let token = uni.getStorageSync('token')
			if (token) {
				that.checkToken(token)
			} else {
				console.log(222)
				that.wxLogin()
			}
		},
		onShareAppMessage(res) {
		
		},
		methods: {
			toTask(id,shot){
				// id=12&praise_screenshot=1
				uni.navigateTo({
					url:'/pages/task/submit?id='+id+'&praise_screenshot='+shot
				})
			},
			async checkToken(token) {
				console.log(token)
				const result = await checkToken({
					token: token
				})
				console.log(result)
				if (result.code == 1) {
					this.getInfo()
				} else {
					this.wxLogin()
				}
			},
			wxLogin() {
				uni.showLoading({
					title: "loading",
					mask: true
				})
				let that = this
				uni.getUserInfo({
					desc: '登录的数据',
					success(ures) {
						console.log(ures, '返回的用户信息');
						uni.login({
							provider: 'wechat',
							success: function(res) {
								console.log('微信登录成功', res)
								let obj = {
									code: res.code,
									encryptedData: ures.encryptedData,
									iv: ures.iv
								}
								that.obj = obj
								that.wxAppLogin()
							},
							fail: function(err) {
								uni.hideLoading();
								console.log('微信登录失败', err)
							}
						})
					}
				})
			},
			async wxAppLogin() {
				let obj = this.obj
				const result = await minilogin(obj)
				if (result.code == 1) {
					uni.setStorageSync('token', result.data.token);
					this.getInfo()
				} else {
					uni.hideLoading();
					uni.showToast({
						title: result.msg,
						icon: 'error'
					});
				}
			},
			async getAllList() {
				const result = await dictAll()
				if (result.code == 1) {
					console.log(this.info.cost_model)
					let arr = result.data.task_cost_model
					arr.forEach(item => {
						if (item.value == this.info.cost_model) {
							this.cost_model_text = item.name
						}
					})
				}

			},
			toPre(img) {
				uni.previewImage({
					urls: [img],
					current: 0
				})
			},
			toSubmit() {
				uni.navigateTo({
					url: '/pages/task/submit?id=' + this.task_id + '&praise_screenshot=' + this.info
						.praise_screenshot
				})
			},
			toLook(id) {
				uni.navigateTo({
					url: '/pages/task/materialList?id=' + id
				})
			},
			toUrl() {
				uni.navigateTo({
					url: '/pages/task/submitList?id=' + this.task_id
				})
			},
			toUrl2(id) {
				uni.navigateTo({
					url: '/pages/task/submitList?id=' + id
				})
			},
			toApply() {
				let that = this
				if (that.info.is_user_price == 1) {
					that.showPrice = true
				} else {
					uni.showModal({
						title: "提示",
						content: "确定要提交申请吗？",
						showCancel: true,
						success: res => {
							if (res.confirm) {
								that.toCon()
							} else {

							}
						}

					})
				}

			},
			toComfirm() {
				if (this.price == '') {
					uni.showToast({
						title: '请输入价格',
						icon: 'error'
					})
					return false
				}
				let that = this
				uni.showModal({
					title: "提示",
					content: "确定要提交申请吗？",
					showCancel: true,
					success: res => {
						if (res.confirm) {
							that.toCon()
						} else {

						}
					}

				})
			},
			async toCon() {
				let obj = {
					task_id: this.id
				}
				if (this.info.is_user_price == 1) {
					obj.price = this.price
				}
				const result = await taskApplyAdd(obj)
				if (result.code == 1) {
					uni.showToast({
						title: result.msg
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/task/list'
						})
					}, 500)
				} else {
					uni.showToast({
						title: result.msg,
						icon: 'none'
					})
				}
			},
			async getInfo() {
				if (this.typeMine == 2) {
					const result = await taskApplyDetail({
						apply_id: this.id
					})
					if(result.code==1){
						if(result.data.task){
							result.data.task.desc = result.data.task.desc.replace(/\n/g, "<br/>")
						}
						this.InfoPrice = result.data.price
						this.info = result.data.task
						this.status = result.data.status
						this.task_id = result.data.task_id
						if (result.data.last_submit != null) {
							this.last_submit = result.data.last_submit
						}
					}
					
				} else {
					const result = await taskDetail({
						task_id: this.id
					})
					if(result.code==1){
						if(result.data){
							result.data.desc = result.data.desc.replace(/\n/g, "<br/>")
						}
						this.info = result.data
					}
					
				}
				this.getAllList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showPrice {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(45, 45, 45, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;

		.showContent {
			background: white;
			width: 80%;
			padding: 30rpx;
			border-radius: 10rpx;

			.tit {
				text-align: center;
				font-size: 30rpx;
				font-weight: bold;
			}

			input {
				padding: 20rpx;
				font-size: 30rpx;
			}

			.btns {
				padding: 60rpx 0 30rpx;

				view {
					width: 45%;
					line-height: 2;
					text-align: center;
					color: white;
				}

				view:nth-child(1) {
					background: gray;
				}

				view:nth-child(2) {
					background: #FF6543;
				}
			}
		}
	}

	.main {
		margin: 20rpx 0;
		padding-bottom: 350rpx;

		.card {
			padding: 20rpx 24rpx;
			background: white;
			margin-bottom: 10rpx;

			.card-tit {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;

				text {
					color: red;
				}
			}

			.card-item {
				font-size: 24rpx;
				margin-bottom: 10rpx;

				view:nth-child(1) {
					width: 26%;
					color: #AAAAAA;
				}
			}

			.step {
				width: 96rpx;
				height: 104rpx;
			}

			.to {
				width: 22rpx;
				height: 18rpx;
			}

			.content {
				font-size: 24rpx;
				line-height: 1.5;

				view {
					margin-bottom: 10rpx;
				}

				text {
					font-weight: bold;
				}
			}

			.costAmount {
				font-size: 26rpx;
				padding: 14rpx 29rpx;
			}
		}

		.file-list {
			.item {
				margin-bottom: 20rpx;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 59rpx;
				margin: 24rpx;

				view {
					border-radius: 42rpx;
				}

				view:nth-child(1) {
					width: 65%;
					background: #f0f0fb;
					color: #FF6543;
					padding: 0 43rpx;
				}

				view:nth-child(2) {
					width: 18%;
					color: white;
					background: #FF6543;
					text-align: center;
				}
			}
		}
	}

	.btom-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: white;
		padding: 21rpx 0;
		box-shadow: 1rpx 2rpx 8rpx 6rpx gainsboro;

		view:nth-child(1) {
			padding: 0 74rpx;
			color: #FF6543;
			font-size: 24rpx;
		}

		view:nth-child(2) {
			background: #FF6543;
			margin-right: 32rpx;
			width: 279rpx;
			line-height: 64rpx;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			border-radius: 32rpx;
		}
	}
</style>